<template>
    <div  id="mescroll" class="mescroll">
      <ul id="dataList" class="data-list clearfix">
        <li v-for="v in cards" :key="v.id" class="col-40" @click="tomake(v.templateSign)">
          <div class="pd-img">
            <img :src="v.path " alt="">
          </div>
          <p class="pd-name">{{v.templatename}}</p>
        </li>
      </ul>
    </div>
</template>
<script>
import { getTemplateList } from '@/api/card'
export default {
  data () {
    return {
      mescroll: null,
      cards: [],
      type: 'all'
    }
  },
  watch: {
    $route (newVal, oldVal) {
      this.mescroll.destroy()
      this.type = newVal.query.type || 'all'
      this.createMescroll()
    }
  },
  methods: {
    tomake (sign) {
      sign = 'ertong'
      this.$router.push({ path: '/make/' + sign })
    },
    createMescroll () {
      var self = this
      console.log(self)
    self.mescroll = new MeScroll('mescroll', { // eslint-disable-line
        up: {
          callback: self.upCallback, // 上拉回调
          // 以下参数可删除,不配置
          isBounce: false,
          // page: { size: 4 }, // 可配置每页8条数据,默认10
          toTop: { // 配置回到顶部按钮
            src: '../res/img/mescroll-totop.png' // 默认滚动到1000px显示,可配置offset修改
          // html: null, //html标签内容,默认null; 如果同时设置了src,则优先取src
          // offset : 1000
          },
          htmlNodata: '' // 无数据的布局
        }
      })
    },
    upCallback (page) {
      // 联网加载数据
      var self = this
      var ajaxData = {
        pageNum: page.num,
        pageSize: page.size,
        findContent: '',
        type: self.type
      }
      if (page.num === 1) self.cards = []
      getTemplateList(ajaxData).then(data => {
        if (data.result === 1) {
          self.cards = self.cards.concat(data.data.list)
          self.mescroll.endBySize(data.data.list.length, data.totalcount)
        } else {
          self.mescroll.endErr()
        }
      })
    }
  },
  created () {
  },
  mounted () {
    this.createMescroll()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.mescroll{position: absolute;;top:20px;;padding-bottom:20px;}
.data-list li{text-align: center;position:relative;list-style: none;float:left;height: 3rem;}
.col-40{width:40%;margin: 5%}
.data-list .pd-img{position: relative;width:100%;height:2.5rem;overflow: hidden;}
.data-list .pd-img img{width: 100%}
.data-list .pd-name{font-size:16px;line-height:2em;height:40px;overflow:hidden;color:#db281c}
</style>
